﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>行编辑模式下，禁用编辑器 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    

</head>
<body>
    <h1>行编辑模式下，禁用编辑器</h1>
    <p>本例演示：如果性别为男，则不允许编辑日期</p>
      <div id="datagrid1" class="mini-datagrid" style="width:500px;height:250px;"  allowResize="true"
        url="../data/AjaxService.jsp?method=SearchEmployees"  idField="id" 
    >
        <div property="columns">
            <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
                <input property="editor" class="mini-textbox" style="width:100%;"/>
            </div>      
            <div name="Birthday" field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
                <input property="editor" class="mini-datepicker" style="width:100%;"/>
            </div>      
            <!--ComboBox：本地数据-->         
            <div type="comboboxcolumn" field="gender" width="100" allowSort="true"  align="center" headerAlign="center">性别
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" onvaluechanged="onGenderChanged"/>                
            </div>
            
        </div>
    </div>    
    
    <script type="text/javascript">
        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("createtime", "desc");

        ///////////////////////////////////////////////////////        
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];


        function onActionRenderer(e) {
            var grid = e.sender;
            var record = e.record;
            var uid = record._uid;
            var rowIndex = e.rowIndex;

            var s = '<a class="New_Button" href="javascript:newRow()">New</a>'
                    + ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')" >Edit</a>'
                    + ' <a class="Delete_Button" href="javascript:delRow(\'' + uid + '\')">Delete</a>';

            if (grid.isEditingRow(record)) {
                s = '<a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">Update</a>'
                    + '<a class="Cancel_Button" href="javascript:cancelRow(\'' + uid + '\')">Cancel</a>'
            }
            return s;
        }

        function newRow() {
            var row = {};
            grid.addRow(row, 0);

            grid.cancelEdit();
            grid.beginEditRow(row);
        }
        function editRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {
                grid.cancelEdit();
                grid.beginEditRow(row);
            }
        }
        function cancelRow(row_uid) {
            grid.reload();
        }
        function delRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {
                if (confirm("确定删除此记录？")) {
                    grid.loading("删除中，请稍后......");
                    $.ajax({
                        url: "../data/AjaxService.jsp?method=RemoveEmployees&id=" + row.id,
                        success: function (text) {
                            grid.reload();
                        },
                        error: function () {
                        }
                    });
                }
            }
        }

        function updateRow(row_uid) {
            var row = grid.getRowByUID(row_uid);

            grid.commitEdit();
            var rowData = grid.getChanges();

            grid.loading("保存中，请稍后......");
            var json = mini.encode(rowData);

            $.ajax({
                url: "../data/AjaxService.jsp?method=SaveEmployees",
                data: { data: json },
                success: function (text) {
                    grid.reload();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });

        }
        ///////////////////////////////////////
        //行编辑模式下，可编辑控制        

        function onGenderChanged(e) {
            var combo = e.sender;
            var row = grid.getEditorOwnerRow(combo);
            var editor = grid.getCellEditor("Birthday", row);
            var enabled = combo.getValue() == "2" ? true : false;
            editor.setEnabled(enabled);
        }
        //在初始编辑的时候，如果性别为男，就不能编辑日期
        grid.on("cellbeginedit", function (e) {
            if (e.field == "birthday") {
                var row = e.record;
                var editor = e.editor;
                var enabled = row.gender == "2" ? true : false;
                editor.setEnabled(enabled);
            }
        });

    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>
</body>
</html>